<template>
  <div class="home">
    <HelloWorld3/>
    <div class="banner"> <img src="../assets/banner2.jpg" alt=""></div>
    <!-- main -->
    <div class="main">
      <h1>热门目的地</h1>
      <div class="main_top">
        <p>国内</p>
        <p>港澳台</p>
        <p>日本</p>
        <p>东南亚</p>
        <p>非洲</p>
        <p>欧洲</p>
        <p>澳洲</p>
        <p>美洲</p>
      </div>
    </div>
    <div class="main_top_ul">
      <ul>
        <li>台湾</li>
        <li>台北</li>
        <li>五莲</li>
        <li>九份</li>
        <li>台北</li>
        <li>台安</li>
        <li>台中</li>
        <li>南投</li>
        <li>阿里山</li>
      </ul>
      <ul>
        <li>台湾</li>
        <li>台北</li>
        <li>五莲</li>
        <li>九份</li>
        <li>台北</li>
        <li>台安</li>
      </ul>
      <ul>
        <li>台湾</li>
        <li>台北</li>
        <li>五莲</li>
        <li>九份</li>
        <li>台北</li>
      </ul>
    </div>
    <div class="line"></div>
    <h1>本周推荐</h1>
    <div class="more"><router-link to="/">查看更多>></router-link></div>
    <div class="main_three">
      <div class="main_three_one">
        <img src="../assets/1.jpg" alt="">
        <div class="main_three_one_top1">TOP.1</div>
        <div class="main_three_one_bottom">需提前预定</div>
      </div>
      <div class="main_three_one">
        <div class="main_three_one_top2">TOP.2</div>
        <img src="../assets/2.jpg" alt="">
      </div>
      <div class="main_three_one">
        <div class="main_three_one_top3">TOP.3</div>
       <img src="../assets/1.jpg" alt="">
      </div>
    </div>
    <!-- theme -->
    <h1>主题精选</h1>
    <div class="more"><router-link to="/">查看更多>></router-link></div>
    <div class="theme">
      <div class="theme_eight">
        <img src="../assets/7.jpg" alt="">
        <div class="theme_eight_font">免签</div>
      </div>
      <div class="theme_eight">
        <img src="../assets/8.jpg" alt="">
        <div class="theme_eight_font">免签</div>
      </div>
      <div class="theme_eight">
        <img src="../assets/5.jpg" alt="">
        <div class="theme_eight_font">免签</div>
      </div>
      <div class="theme_eight">
        <img src="../assets/8.jpg" alt="">
        <div class="theme_eight_font">免签</div>
      </div>
      <div class="theme_eight">
        <img src="../assets/6.jpg" alt="">
        <div class="theme_eight_font">免签</div>
      </div>
      <div class="theme_eight">
        <img src="../assets/8.jpg" alt="">
        <div class="theme_eight_font">免签</div>
      </div>
      <div class="theme_eight">
        <img src="../assets/7.jpg" alt="">
        <div class="theme_eight_font">免签</div>
      </div>
      <div class="theme_eight">
        <img src="../assets/13.jpg" alt="">
        <div class="theme_eight_font">免签</div>
      </div>
    </div>
    <!-- end -->
    <HelloWorld2/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld3 from '@/components/HelloWorld3.vue'
import HelloWorld2 from '@/components/HelloWorld2.vue'
export default {
  name: 'HomeView',
  components: {
    HelloWorld3,
    HelloWorld2
  },
   
}
</script>
<style scoped lang="less">
*{margin: 0;padding: 0;}
.banner{width: 100%;img{width: 100%;}}
h1{text-align: center;margin: 40px 0;}
.line{background-color:#eeeeee;height: 3px;width: 100%;margin: 30px 0;}
.main_top{width: 80%;margin: 0 auto;display: flex;flex-direction: row;justify-content: space-between;font-size: 30px;}
.main_top_ul ul{display: flex;flex-direction: row;width: 80%;padding-left: 20%;}
.main_top_ul ul li{list-style-type: none;padding-left: 0px;line-height: 70px;margin: 0 6% 0 0;font-size: 20px;color: #666565;}
.main_top_ul ul li:first-child{font-size: 30px;color: black;}
.main_top p{padding: 10px 0;margin: 30px 0;}
.main_top p:first-child,p:hover{color: aqua;border-bottom: 2px solid aqua;}
.more{width: 80%;margin: 0 auto;text-align: right;a{color: #bcb9b9;text-decoration: none;}}
.main_three{width: 80%;margin: 30px auto;border: #666565 0px solid;display: flex;flex-direction: row;justify-content: space-between;}
.main_three_one{width: 30%;border: #666565 0px solid;position: relative;
img{width: 100%;border-radius:10px;display: block;}}
.main_three_one_top1,.main_three_one_top2,.main_three_one_top3{position: absolute;top: 0;left: 0;color: white;font-size: 20px;padding: 10px 30px;border-top-left-radius:10px;border-top-right-radius:0px;border-bottom-right-radius:30px;border-bottom-left-radius:0px;}
.main_three_one_top1{background-color: rgb(251, 14, 14);}
.main_three_one_top2{background-color: #fd7d03;}
.main_three_one_top3{background: #fcc61b;}
.main_three_one_bottom{color: white;width: 100%;background-color: rgba(11, 11, 11, 0.3);padding: 10px 0;text-align: center;font-weight: bold;border-radius:10px;position: absolute;bottom: 0;left: 0;}
.theme{width: 80%;margin: 50px auto;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;}
.theme_eight{width: 23%;position: relative;img{width: 100%;display: block;height: 100%;}margin: 20px 0;}
.theme_eight_font{position: absolute;left: 0;bottom: 0;width: calc(100% - 10px);color: white;background-color: rgba(11, 11, 11, 0.3);padding: 10px 5px;font-weight: bold;}
</style>